<!DOCTYPE html>
<html>
    <head><style>
    html { height: 100% }
  body { height: 100%; margin: 0; padding: 0;font-family: Verdana,Arial,sans-serif;font-size: .9em; }
  #map{ height: 100%;width: 100%; }
    </style>
        <title>Example </title>        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBvl2Lx_Tj-9N_fT9arfnl8utRkVPe50uA&sensor=true"></script>
        <script type="text/javascript" src="../dist/shp.js"></script>

<script>
var url = "../files/pandr"
shp(url).then(function(data){
	var googleMap = new google.maps.Map(
		// Add a Google Map
		document.getElementById('map'), {
			center: new google.maps.LatLng(41.914541,-71.592407),
			zoom: 8,
			mapTypeId: 'roadmap'
		}
	);
	var infowindow = new google.maps.InfoWindow();
	data.features.forEach(function(feature, i){
		// Add a marker to the map
		feature.marker = new google.maps.Marker({
			position:new google.maps.LatLng(
				feature.geometry.coordinates[1],
				feature.geometry.coordinates[0]
			),
			title:feature.properties.TOWN
		});
		feature.marker.setMap(googleMap);
		// Create the info window
		//console.log(feature.properties);
		var out = [];
		for(var key in feature.properties){
			out.push(key+": "+feature.properties[key]);
		}
		var content = "<div class='iwindow'>" + out.join("<br/>") + "</div>";
		google.maps.event.addListener(
			feature.marker,
			'click',
			function() {
 				infowindow.setContent(content);
				infowindow.open(googleMap,feature.marker);
			}
		);
	});
});
</script>
    </head>
    <body>
<div id="map" ></div>
    </body>
</html>

